<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--需要运行在IE9+。不支持IE8-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../public/layui/css/layui.css"/>
    <link rel="stylesheet" href="../public/css/basic.css"/>
    <link rel="stylesheet" href="../public/css/manage.css"/>
    <script src="../public/js/jquery-1.11.1.min.js"></script>
    <script charset="gb2312"  src="../public/js/browser.js"></script>
    <script type="text/javascript" src="../public/js/dragscroll_micro.js"></script>
    <title>新增区块</title>
    <style>
        .kname{font-weight: 800;margin-top: -88px;position: absolute;z-index: 9999;width: 100px;word-wrap:break-word;text-align: center}
    </style>

</head>

<body id="body">
<form action="" class="layui-form">
    <div class="search">
        <div>
            <button class="layui-btn add">选择区域</button>
            <div class="layui-input-inline " >
                <div class="layui-input-block" style="width: 150px;margin-left: 20px">
                    <select name="interest" lay-filter="aihao">
                        <option value="">区域0</option>
                        <option value="0">区域1</option>
                        <option value="1" selected="">区域2</option>
                        <option value="2">区域3</option>
                        <option value="3">区域4</option>
                        <option value="4">区域5</option>
                    </select>
                </div>
            </div>
            <div class="layui-input-inline fr"  style="color: #999">
               提示：右键点击在基地实景中标注出区块的位置，部分功能在i8以及以下浏览器无法使用
            </div>
        </div>
    </div>
</form>

<div class="sco">
    <div id="father" style="overflow: hidden;">
        <div class="dragscroll free" style="position: relative;">
            <!--基地实景图片-->
            <img id="imgsrc" src="http://p3.so.qhimgs1.com/t015e017add0e021473.jpg" style="border: none;" ondragstart="return false;">

        </div>
    </div>
    <button class="layui-btn layui-btn-small layui-btn-normal"  onclick="getMarkerInfo()">获取添加的标志点信息</button>
</div>
<div class="but1-mid mt20"><button class="layui-btn">保存</button></div>

<!--右键菜单-->
<div id="contextmenu" style="display: none;">
    <p class="able" onclick="addMarker()"><i class="layui-icon">&#xe654;</i>新增区块</p>
    <p class="able" onclick="addMarkerInfo()"><i class="layui-icon">&#xe642;</i>添加区块信息</p>
    <div style="border-bottom: 1px solid #C9C9C9;"></div>
    <p class="able" onclick="delectMarker()"><i class="layui-icon">&#xe640;</i>移除区块</p>
</div>


</body>
<script src="../public/layui/layui.js"></script>
<script>
    layui.use(['form',], function() {
        var form = layui.form;

    })
    $('#father').height($(window).height() - 190);
    $('.free').height($('#father').height() + 18);

    window.onresize = function() {
        $('#father').height($(window).height() -190);
        $('.free').height($('#father').height() + 18);
    }

    var layer="";
    layui.use('layer',function(){
        layer=layui.layer;
    });
    var markerX = "";//标志点X坐标
    var markerY = "";//标志点Y坐标
    var clickType=0;//点击类型，1为添加，2为处理
    var clickObj="";//处理的对象，存在于clickType=2
    //定义右击事件
    window.onload = function() {
        //屏蔽系统右击事件
        document.oncontextmenu = function(e) {
            e.preventDefault();
        }
        //自定义右击事件
        $('#imgsrc').mousedown(function(e) {
            hideCtx();
            if(e.button == 2 && e.target.id == "imgsrc") {
//					clientX和clientY是对于显示区域的坐标，该坐标用于右键菜单的定位显示
//					offsetX和offsetY是响应事件的坐标，该坐标用于标志点的定位显示
                showCtx(e.clientX,e.clientY);
                markerX = e.offsetX;
                markerY = e.offsetY;
                //开启添加事件，屏蔽添加信息和删除信息
                clickType=1;
                $('#contextmenu').children('p').eq(0).removeClass('disable');
                $('#contextmenu').children('p').eq(0).addClass('able');
                $('#contextmenu').children('p').eq(1).removeClass('able');
                $('#contextmenu').children('p').eq(1).addClass('disable');
                $('#contextmenu').children('p').eq(2).removeClass('able');
                $('#contextmenu').children('p').eq(2).addClass('disable');
            }
        });
    }
    //添加标志点
    function addMarker() {
        if(clickType==2){
            return false;
        }
        var str = '<div class="markerFlag" onmousedown="markerCtx(this,event)"  style="position:absolute;left:' + markerX+ 'px;top:' + markerY + 'px";>' +
                '<img style="width: 100px;height:100px" src="../public/img/pic1.png"/> <div class="kname" style="">区块</div>' +
                '</div>'
        $('.dragscroll').append(str);



        hideCtx();
    }
    //添加标志点信息
    function addMarkerInfo(){
        if(clickType==1){
            return false;
        }
        hideCtx();
        layer.open({
            type: 2,
            title: '修改区块名',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['400px', '300px'],
            content: 'addinfo.html'
        });
    }
    //将辅助信息保存到当前对象的data里
    function addInfo(json){
        $(clickObj).data('extra',json);
        $(clickObj).children('div').html(json[0].placename);
        layer.msg('添加成功',{icon: 1,time:1500});
    }
    //删除标志点
    function delectMarker(){
        if(clickType==1){
            return false;
        }
        $(clickObj).remove();
        hideCtx();
    }
    //显示右键弹窗
    function showCtx(x,y){
        document.getElementById("contextmenu").style.display = 'block';
        $('#contextmenu').css('left', x);
        $('#contextmenu').css('top', y);
    }
    //关闭右键弹窗
    function hideCtx(){
        if(document.getElementById("contextmenu").style.display == "block") {
            document.getElementById("contextmenu").style.display = 'none';
        }
    }
    //标志点的右击事件
    function markerCtx(obj,event){
        clickObj=obj;
        var e=event||window.event;
        hideCtx();
        if(e.button == 2) {
            showCtx(e.clientX,e.clientY);
            //屏蔽添加事件，增加添加信息和删除事件
            clickType=2;
            $('#contextmenu').children('p').eq(0).removeClass('able');
            $('#contextmenu').children('p').eq(0).addClass('disable');
            $('#contextmenu').children('p').eq(1).removeClass('disable');
            $('#contextmenu').children('p').eq(1).addClass('able');
            $('#contextmenu').children('p').eq(2).removeClass('disable');
            $('#contextmenu').children('p').eq(2).addClass('able');
        }

    }
    //获取所有标志点信息
    function getMarkerInfo(){
        //记录下当前图片的显示长宽。然后在分别记录下
        var infor=[];
        infor.push({"Imgwidth":$('#imgsrc').width(),"Imgheight":$('#imgsrc').height()});
        for(var i=0;i<$('.dragscroll').children('.markerFlag').length;i++){
            if(undefined==$('.dragscroll').children('.markerFlag').eq(i).data('extra')){
                var infor1=[];
                var name= '区块';
                infor1.push({"placename":name});
                infor.push({"MarkerX":$('.dragscroll').children('.markerFlag').eq(i).css('left'),"MarkerY":$('.dragscroll').children('.markerFlag').eq(i).css('top'),"extra":infor1});
            }
            else{
                infor.push({"MarkerX":$('.dragscroll').children('.markerFlag').eq(i).css('left'),"MarkerY":$('.dragscroll').children('.markerFlag').eq(i).css('top'),"extra":$('.dragscroll').children('.markerFlag').eq(i).data('extra')});
            }
        }
//			var json = JSON.stringify(infor); 
        layer.msg("请到控制台查看获取的数据信息");
        console.log("标志点信息：");
        console.log(infor);
    }


</script>

</html>